<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		.wutai{
			position: relative;
			width: 100%;
			height: 100%;
		}
		.snke{
			position: absolute;
			width: 20px;
			height: 20px;
			background-color: #ccc;
		}
		.snke:last-child{
			background-color: blue;
		}
		.shiwu{
			position: absolute;
			width: 20px;
			height: 20px;
			background-color: red;
		}
	</style>
</head>
<body onkeydown="handel(event)">
	<div class="wutai"></div>
	<div class="shiwu"></div>
<script>
	// 舞台 和食物
	var wuT = document.getElementsByClassName('wutai')[0]
	var shiwu = document.getElementsByClassName('shiwu')[0]
	//  屏幕的宽高
	var wW = window.innerWidth
	var wH = window.innerHeight
	//  食物坐标
	var shiwuPoint = {}
	// 定时器ID
	var timerId;
	// 方向
	var fangxiang=null
	// 游戏 是否结束开关
	var isGemoVoer=false
	// 蛇身体
	var snkePoint = [
		{x:0,y:0},
		{x:20,y:0},
		{x:40,y:0},
		{x:60,y:0}
	]
	// 键盘的处理事件
	function handel(ev){
		if(isGemoVoer) return
		if(ev.key==='ArrowUp'){
			move('up')
			fangxiang='up'
		}
		if(ev.key==='ArrowDown'){
			move('bottom')
			fangxiang='bottom'
		}
		if(ev.key==='ArrowLeft'){
			move('left')
			fangxiang='left'
		}
		if(ev.key==='ArrowRight'){
			move('right')
			fangxiang='right'
		}
	}
	initSnke()
	// 重新渲染蛇
	function initSnke(){
		wuT.innerHTML = ''
		for(var i=0;i<snkePoint.length;i++){
			wuT.innerHTML+='<div class=snke style=left:'+snkePoint[i].x+'px;top:'+snkePoint[i].y+'px></div>'
		}
	}
	// 食物
	initBrede()
	function initBrede(){
		// 把舞台 按宽20分n个等分
		        //高  按20分n个等分
		var wNum = parseInt(wW/20)
		var hNum = parseInt(wH/20)
		shiwuPoint.y = (((Math.random()*hNum)|0)*20)
		shiwuPoint.x = (((Math.random()*wNum)|0)*20)
		shiwu.style.left = shiwuPoint.x+'px'
		shiwu.style.top = shiwuPoint.y+'px'
	}
	var nextStep = {
		'left':function(){
			snkePoint.push({x:snkePoint[snkePoint.length-1].x-20,y:snkePoint[snkePoint.length-1].y})
		},
		'right':function(){
			snkePoint.push({x:snkePoint[snkePoint.length-1].x+20,y:snkePoint[snkePoint.length-1].y})
		},
		'up':function(){
			snkePoint.push({x:snkePoint[snkePoint.length-1].x,y:snkePoint[snkePoint.length-1].y-20})
		},
		'bottom':function(){
			snkePoint.push({x:snkePoint[snkePoint.length-1].x,y:snkePoint[snkePoint.length-1].y+20})
		}
	}
	function move(flg){
		if(!handelNiXiang(flg)){
			clearInterval(timerId)
			timerId = setInterval(() => {
				//移动头
			nextStep[flg]()
			var lastP = snkePoint[snkePoint.length-1]
			if(lastP.x<0||lastP.x>wW||lastP.y<0||lastP.y>wH||handelZJ(lastP)){ // 检测是否撞墙  和 咬自己
				isGemoVoer = true
				clearInterval(timerId)
				alert('自尽')
			}
			// 检测是否普迟到食物
			if(snkePoint[snkePoint.length-1].x==shiwuPoint.x&&snkePoint[snkePoint.length-1].y==shiwuPoint.y){
				initBrede()
			}else{
				// 尾部去掉一个
				snkePoint.shift()
			}
			// 重新渲染蛇
		   initSnke()
		}, 1000);
	}
	}
	function handelZJ(last){
		var result = false
		for(var i=0;i<snkePoint.length;i++){
			// 跳过头自己
			if(snkePoint.length-1 == i){
				continue
			}
			if(last.x==snkePoint[i].x && last.y==snkePoint[i].y){
				result = true
				break
			}
		}
		return result
	}
	// 防止逆行行驶
	function handelNiXiang(flg){
		var result = false
		switch (flg) {
			case 'up':
				result =  fangxiang == 'bottom'
				break;
			case 'bottom':
			result =  fangxiang == 'up'
			break;
			case 'left':
			result =  fangxiang == 'right'
			break;
			case 'right':
			result =  fangxiang == 'left'
			break;
		}
		return result
	}
</script>
</body>
</html>